<template>
  <div class="inner_tool_bar" id="inner_tool_bar" style="pointer-events:all">
    <div class="drawBar">
      <div class="drawBtn" v-show="ifShowBtn">
        <div
          v-for="(item,index) in toolList"
          v-show="item.show"
          :key="index"
          :id="item.id"
          @click="selectTool(item)"
          :title="item.name"
          :class="item.selected ? 'sBtn selectedBtn' : 'sBtn selectBtn'"
        >
          <el-icon v-if="item.id === 'choose'"><Position /></el-icon>
          <el-icon v-if="item.id === 'polygon'"><Crop /></el-icon>
          <div v-if="item.id === 'rectangle'">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              style="color: white;border:1px solid white;background: transparent;width: 0.6em;height: 0.6em;"
              version="1.1"
            >
              <rect width="1em" height="1em" fill="transparent" />
            </svg>
          </div>
          <div v-if="item.id === 'hideOrShow'">
            <svg
              v-if="hideOrShow"
              viewBox="0 0 1024 1024"
              style="color: white;"
              xmlns="http://www.w3.org/2000/svg"
              data-v-029747aa=""
            ><path fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z" /></svg>
            <svg
              v-else
              viewBox="0 0 1024 1024"
              style="color: white;"
              xmlns="http://www.w3.org/2000/svg"
              data-v-029747aa=""
            ><path d="M876.8 156.8c0-9.6-3.2-16-9.6-22.4-6.4-6.4-12.8-9.6-22.4-9.6-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4 0 9.6 3.2 16 9.6 22.4 6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8 28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8 0-44.8 16-83.2 48-112 32-28.8 67.2-48 112-48 28.8 0 54.4 6.4 73.6 19.2L371.2 588.8ZM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6-28.8 48-80 105.6-153.6 172.8-73.6 67.2-172.8 108.8-284.8 115.2-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8 160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z" fill="currentColor" /><path d="M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2 64 0 115.2-22.4 160-64 41.6-41.6 64-96 64-160 0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4 0 44.8-16 83.2-48 112-32 28.8-67.2 48-112 48Z" fill="currentColor" /></svg>
          </div>

          <p>{{ item.name }}</p></div>
      </div>
      <div class="showDraw" @click="handleShowDraw"><el-icon class="eicon"><Edit /></el-icon></div>
    </div>

  </div>
</template>
<script lang="ts" setup>
import { computed, reactive, ref, toRaw } from 'vue'
import { Position, Crop } from '@element-plus/icons'
const emit = defineEmits(['drawClick', 'saveGraphic'])
const ifShowBtn = ref(false)
const handleShowDraw = () => {
  ifShowBtn.value = !ifShowBtn.value
  emit('drawClick', ifShowBtn.value)
}
const props = defineProps({
  lcmap: {
    type: Object,
    required: true,
    default: () => {}
  }
})
const hideOrShow = ref(true)
const toolList = reactive([
  // {
  //   id: 'point',
  //   name: '点',
  //   selected: false
  // },
  // {
  //   id: 'polyline',
  //   name: '折线',
  //   selected: false
  // },
  // {
  //   id: 'choose',
  //   name: '选择',
  //   selected: true,
  //   show: true
  // },
  {
    id: 'polygon',
    name: '多边形',
    selected: false,
    show: true
  },
  {
    id: 'rectangle',
    name: '矩形',
    selected: false,
    show: true
  },
  // {
  //   id: 'circle',
  //   name: '圆形',
  //   selected: false
  // },
  // {
  //   id: 'clear',
  //   name: '清空',
  //   selected: false
  // },
  {
    id: 'hideOrShow',
    name: '隐藏',
    selected: false,
    show: hideOrShow.value
  }
])

// 选中工具
const selectTool = (item:any) => {
  toolList.forEach(element => {
    if (element.name !== item.name) {
      element.selected = false
    }
  })

  item.selected = true
  // if (item.id === 'clear') {
  //   if (sketchLayer) {
  //     sketchLayer.removeAll() // 清空标绘图层
  //   }
  //   sketchViewModel.cancel() // 取消已存在标绘

  //   toolList.forEach(element => { // 全部取消选中状态
  //     element.selected = false
  //   })
  // } else {
  if (item.id === 'hideOrShow') {
    hideOrShow.value = !hideOrShow.value
    item.name = hideOrShow.value ? '隐藏' : '显示'
    if (sketchLayer) {
      sketchLayer.visible = hideOrShow.value // 隐藏标绘图层
    }
    toolList.forEach(element => { // 全部取消选中状态
      element.selected = false
    })
  } else {
    geometryButtonsClickHandler(item.id)
  }
}

const lcmap = toRaw(computed(() => props.lcmap).value)
const mapView = toRaw(computed(() => props.lcmap.mapView).value)
const sketchLayer = lcmap.createLayer('sketchLayer') // 测量图层
lcmap.mapView.map.reorder(sketchLayer, 999)
// 标绘功能实例化
const sketchViewModel = new lcmap.ArcGisMapObj.SketchViewModel({
  layer: sketchLayer,
  view: mapView,
  pointSymbol: {
    type: 'simple-marker',
    style: 'circle',
    size: 10,
    color: [255, 255, 255, 0.8],
    outline: {
      color: [211, 132, 80, 0.7],
      size: 10
    }
  },
  polylineSymbol: {
    type: 'simple-line',
    color: [255, 0, 0, 0.6],
    width: 2
  },
  polygonSymbol: {
    type: 'simple-fill',
    color: [128, 128, 128, 0], // 填充颜色
    outline: { // 边线颜色及线条宽度
      style: 'dot',
      color: '#2eade8',
      width: 1.5
    }
  },
  defaultCreateOptions: { hasZ: false },
  updateOnGraphicClick: false // 是否开启编辑
})

const measureType = ref('')
// 标绘功能
const geometryButtonsClickHandler = (geometryType:string) => {
  sketchViewModel.cancel() // 取消已存在标绘
  sketchViewModel.create(geometryType) // 根据传入值初始化测量模块
  measureType.value = geometryType
}

// 监听标绘过程
sketchViewModel.on(['create'], (event:any) => {
  if (event.state === 'complete') { // 标绘结束
    toolList.forEach(element => {
      element.selected = false
    })
    const geometry = lcmap.ArcGisMapObj.webMercatorUtils.webMercatorToGeographic(event.graphic.geometry)
    emit('saveGraphic', event.graphic, geometry)
  }
})
const closeDrawDialogone = () => {
  sketchViewModel.cancel() // 取消已存在标绘
  toolList.forEach(element => { // 全部取消选中状态
    element.selected = false
  })
  ifShowBtn.value = false
}
defineExpose({
  closeDrawDialogone
})
</script>
<style lang="scss" scoped>
  .inner_tool_bar {
    position: absolute;
    display: flex;
  }
  .drawBar{
    display: flex;
  }
  .showDraw{
    width: 36px;
    height: 36px;
    background-color: #d5a54c;
    border-radius: 8px;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
    .eicon{
      font-size: 23px;
      color: #efd9d9;
    }
  }
  .drawBtn{
    display: flex;
    flex-direction: column;
    background-color: #2c3441;
    color: white;
    user-select: none;
    margin-right: 0.1rem;
  }
  .sBtn{
    cursor: pointer;
    width: 0.7rem;
    height: 0.7rem;
    display: flex;
    // text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #2c3441;
  }
  svg{
    width: 1em;
    height: 1em;
  }
  .sBtn:hover{
    background-color: #4d5868;
  }
  .selectedBtn{
    background-color: #4d5868;
  }
  .selectBtn{
    background-color: #2c3441;
  }

</style>
